﻿

new Vue({
  data: {
    viewType: getUrlParams()._id ? 1 : 0,
    viewSelectId: '',
    Music: localStorage.getItem('Music') === null ? {} : JSON.parse(localStorage.getItem('Music')),
    moveTimer: null,
    musicInfo: {},
    musicArea: [
      { 'name': '日语', 'eName': 'japan' },
      { 'name': '中文', 'eName': 'china' },
      { 'name': '欧美', 'eName': 'usa' }
    ],
    japanMusic: [],
    japanMusicTop: [],
    chinaMusic: [],
    chinaMusicTop: [],
    usaMusic: [],
    usaMusicTop: [],
    musicOthers: [],
    musicList: [],
    musicPlayer: {
      imgSrc: '../../public/img/index/music/upload/common/song1.jpg',
    },
    playerList: localStorage.getItem('Music') === null ? [] : JSON.parse(JSON.parse(localStorage.getItem('Music')).playerList),
    playerListIndex: localStorage.getItem('Music') === null ? 0 : -1,
    playerType: 1,
    audio: null,
    lyric: null,
    volume: localStorage.getItem('volume')||'0.5',
    audioAllTime: null,
    is_Move: false,
    songLyrcl: '',
  },
  methods: {
    // 读取数据
    readFile() {
      this.$http.get('./moongoDB/musics').then(response => {
        let res = response.body;
        if (res) {
          this.musicList = res.reverse();

          this.japanMusic = this.musicList.filter(item => item.area == "日语");
          this.japanMusicTop = this.japanMusic.concat();

          this.chinaMusic = this.musicList.filter(item => item.area == "中文");
          this.chinaMusicTop = this.chinaMusic.concat();

          this.usaMusic = this.musicList.filter(item => item.area == "英语");
          this.usaMusicTop = this.usaMusic.concat();

          if (getUrlParams()._id) {
            this.toMusicInfo(getUrlParams()._id)
          } else {
            // 轮播图
            this.swiper(6);
          }

          // 初始化数据
          this.initData();

          // 渲染歌词
          this.initLyric();
          // 监听播放器音乐数据
          this.loadMusicAllTime();
          this.loadMusicNowTime();
          this.loadMusicEnded();
          this.onProgressMouseMove();
          this.onVoiceProgressMove();
          this.onVoicehide();
          this.onPlayerListMove();
          this.onAllPlayerListMove();
          // 先暂停音乐
          this.pauseMusic();
          this.hidePlayerLists();
          
        }
      }, response => {
        console.log('请求数据失败！');
      });
    },

    // 随机数生成
    randomNum(length) {
      return parseInt(Math.random() * length) + 1;
    },
    // 不重复随机数组
    noRepeatNum(num, n) {
      if (typeof num !== "number" || typeof n !== "number") return false;  //对象检测
      var aNum = [];
      if (num <= n) {
        for (var j = 0; j < num; j++) {
          aNum.push(j);
        };
        return aNum;
      }         //如果n大于num就生成0到num-1的每一个数
      else {
        while (aNum.length < n) {
          var random = Math.round(Math.random() * num);
          if (aNum.indexOf(random) == -1) {
            aNum.push(random);
          }
        }
        return aNum;
      }
    },
    // 随机音乐
    randomMusic(el) {
      this.musicPlayer = el[this.randomNum(el.length) - 1];
    },

    // 初始化
    initData() {
      if (this.playerList.length == 0) {
        localStorage.removeItem('Music');
        // 随机渲染默认播放器
        this.randomMusic(this.musicList);
      } else {

        if(getUrlParams()._id){
          this.musicPlayer = this.musicInfo;
        }else{
          this.musicPlayer = this.playerList[0];
          $('#playerList .playerList').eq(0).addClass('playing');
          this.pauseMusic(this.playerListIndex);
        }

        $('#musicAll .playerList').each(function (index, el) {
          setTimeout(() => {
            $(this).animate({ width: '100%', height: '80px', opacity: 1 }, 150 * (index + 1));
          }, 100)
        })
      }
      this.japanMusicTop.sort(valueSortBy("zValue", "title")).reverse();
      this.chinaMusicTop.sort(valueSortBy("zValue", "title")).reverse();
      this.usaMusicTop.sort(valueSortBy("zValue", "title")).reverse();

      // 默认音量
      setTimeout(()=>{
        var scale = this.volume;
        this.audio.volume = scale;
        if (scale >= 0.9) {
          $('.musicVoiceIcon').attr('class', 'musicVoiceIcon glyphicon glyphicon glyphicon-volume-up');
          $('.musicVoiceIcon').attr('data-volume', 1);
          $('.voiceProgressC').height(`85%`);
        } else if (scale < 0.1) {
          $('.musicVoiceIcon').attr('class', 'musicVoiceIcon glyphicon glyphicon glyphicon-volume-off');
          $('.voiceProgressC').height(0);
        } else {
          $('.musicVoiceIcon').attr('class', 'musicVoiceIcon glyphicon glyphicon glyphicon-volume-down');
          $('.musicVoiceIcon').attr('data-volume', scale);
          $('.voiceProgressC').height(`${ scale * 85}%`);
        }
      },100);
    },

    // 获取歌词
    initLyric() {
      // 获取歌词
      var lyric = new Lyric(this.musicPlayer.LyricsUrl);
      var $lryicContainer = $(".lycList");
      // 清空上一首音乐歌词
      this.songLyrcl = '';
      $lryicContainer.html("");
      
      lyric.loadLyric(function () {
        // 创建歌词列表
        $.each(lyric.lyrics, function (index, ele) {
          var $item = $("<span class='lycLess'>" + ele + "</span>");
          $lryicContainer.append($item);
        });
      });
      // 保存  
      this.lyric = lyric;
    },

    // 轮播图
    swiper(num) {
      setTimeout(() => {
        var mySwiper = new Swiper('.swiper-container', {
          autoplay: 4000,
          autoHeight: true,
          speed: 1000,
          grabCursor: true,
          autoplayDisableOnInteraction: false, preventLinksPropagation: true,
          loop: true,
          centeredSlides: true,
          slidesPerView: num,
          pagination: '.swiper-pagination',
          paginationClickable: true,
          prevButton: '.swiper-button-prev',
          nextButton: '.swiper-button-next',
          onInit: function (swiper) {
            swiper.slides[num].className = "swiper-slide swiper-slide-active";
          },
          breakpoints: {
            668: {
              slidesPerView: 1,
            }
          }
        });
        $('.imgArr').removeClass('hide');
        $('.button').css('top', -$('.swiper-container').height() / 1.9);

        setTimeout(() => {
          $('.imgArr .swiper-slide').hover(function () {
            mySwiper.stopAutoplay();
          }, function () {
            mySwiper.startAutoplay();
          })
        }, 50);
      }, 200)
    },



    // 监听载入音乐
    loadMusicAllTime() {
      this.audio.addEventListener('durationchange', () => {
        this.audioAllTime = this.audio.duration;
        $('#musicArea .musicTime .allTime').html(`${addZero(floor(this.audioAllTime / 60))}:${addZero(floor(this.audioAllTime % 60))}`);
      })
    },
    // 监听音乐实时
    loadMusicNowTime() {
      this.audio.addEventListener('timeupdate', () => {
        if (this.is_Move) return;
        var time = this.audio.currentTime;
        var scale = time / this.audioAllTime;
        if (scale) $('.progress_bar').width(`${scale * 100}%`)
        $('.musicTime .nowTime').html(`${addZero(floor(time / 60))}:${addZero(floor(time % 60))}`);

        // 实现歌词同步
        var index = this.lyric.currentIndex(time).index;
        var realIndex = this.lyric.currentIndex(time).realIndex;

        var $item = $(".lycList span").eq(realIndex);
        $item.addClass("lycMore");
        $item.siblings().removeClass("lycMore");

        //极简
        if (index >= 0) {
          this.songLyrcl = this.lyric.lyrics[realIndex];
        }

        if (index < 2) {
          $(".lycList").animate({ top: 0 }, 100);
        } else {
          $(".lycList").animate({
            top: (-index + 2) * 30
          }, 100);
        }


      })
    },
    // 监听音乐播放完毕
    loadMusicEnded() {
      this.audio.addEventListener('ended', () => {
        if (this.playerType == 1) { // 顺序播放
          if (this.playerList.length == 0) {
            this.pauseMusic();
          } else {
            if (this.playerListIndex + 1 == this.playerList.length) {
              this.playThisMusicList(this.playerList[0], 0);
            } else {
              this.playThisMusicList(this.playerList[this.playerListIndex + 1], this.playerListIndex + 1);
            }
          }
        } else if (this.playerType == 2) { // 循环播放
          this.pauseMusic();
          this.initLyric();
          this.audio.currentTime = 0;
          setTimeout(() => { this.playMusic(); }, 16.7);
        } else if (this.playerType == 3) {// 随机播放 
          if (this.playerList.length == 0) {
            this.pauseMusic();
          } else {
            var timer = null;
            timer = setInterval(() => {
              var randomNum = this.randomNum(this.playerList.length) - 1;
              if (this.musicPlayer !== this.playerList[randomNum]) {
                this.playThisMusicList(this.playerList[randomNum], randomNum);
                clearInterval(timer);
              }
            }, 60);
          }
        }
      })
    },


    // 播放音乐
    playMusic(index) {
      if (this.playerList.indexOf(this.musicPlayer) == -1) {
        this.playerListIndex = -1;
        $('.playerList').removeClass('playing');
      } else {
        this.playerListIndex = this.playerList.indexOf(this.musicPlayer);
      }
      if (index) { $('#playerList .playing .playIcon').attr('class', 'glyphicon glyphicon-pause playIcon'); }
      $('#musicArea .playerIcon').attr('class', 'glyphicon glyphicon-pause playerIcon');
      $('#musicArea .imgDiv img').addClass('run');
      this.audio.play();
    },
    // 暂停音乐
    pauseMusic(index) {
      if (index) $('#playerList .playing .playIcon').attr('class', 'glyphicon glyphicon-play playIcon');
      $('#musicArea .playerIcon').attr('class', 'glyphicon glyphicon-play playerIcon');
      $('#musicArea .imgDiv img').removeClass('run');
      this.audio.pause();
    },


    // 播放此音乐
    playThisMusic(music, index) {
      if (this.musicPlayer !== music) {
        this.musicPlayer = music;
        this.initLyric();
      }
      setTimeout(() => { this.playMusic(index) }, 200);
    },
    // 添加此音乐至播放列表
    addThisMusic(music) {
      var arr = this.playerList.filter(item => (item._id == music._id));
      this.showPlayerLists();
      if (arr.length == 0) {
        this.playerList.push(music);
        this.Music.playerList = JSON.stringify(this.playerList);
        localStorage.setItem('Music', JSON.stringify(this.Music));

        var that = this;
        setTimeout(() => {
          var h;
          if($('#musicAll').height()>500){
            h = 420 - $('#musicAll').height();
          }else{
            h = 0;
          }
          $('#musicAll .playerList').eq(that.playerList.length - 1).stop().animate({ width: '100%', height: '80px', opacity: 1 }, "200");
          $('#musicAll').stop().animate({
            top:`${h}px`
          },"200");
        }, 20);
      }else{
        noticeDiv('不可重复添加！','info',2000);
      }

    },
    // 播放器添加至列表
    addplayerMusic() {
      if (this.playerList.indexOf(this.musicPlayer) == -1) {
        this.addThisMusic(this.musicPlayer);
      }else{
        noticeDiv('已添加至列表','info',2000);
      }
    },
    // 音乐列表播放
    playThisMusicList(music, index, boolean) {
      if ($('.playerList').eq(index).find('.backBg span').hasClass('glyphicon glyphicon-play') || boolean) {
        this.playThisMusic(music, index);
        $('.playerList').eq(index).addClass('playing');
        $('.playerList').eq(index).siblings().removeClass('playing');
        $('.playerList').eq(index).find('.backBg span').attr('class', 'glyphicon glyphicon-pause playIcon');
        $('.playerList').eq(index).siblings().find('.backBg span').attr('class', 'glyphicon glyphicon-play playIcon');
        this.playerListIndex = index;
      } else {
        $('.playerList').eq(index).find('.backBg span').attr('class', 'glyphicon glyphicon-play playIcon')
        this.pauseMusic(index);
      }
    },
    // 重播此音乐或者播放
    replayThisMusic(music, index) {
      this.playThisMusicList(music, index);
    },
    // 列表中删除此音乐
    deleteThisPlayerMusic(index) {
      var that = this;
      setTimeout(function () {
        $('#musicAll .playerList').eq(index).animate({ width: '0', height: '0', opacity: '0' }, 200, function () {
          setTimeout(() => {
            var deleteList = that.playerList[0];
            that.playerList.splice(index, 1);
            $(this).css({ width: '100%', height: '80', opacity: '1' });
            that.Music.playerList = JSON.stringify(that.playerList);
            localStorage.setItem('Music', JSON.stringify(that.Music));

            if (that.playerListIndex == 0 && that.musicPlayer != deleteList) return;

            if (index == that.playerListIndex) {
              if (that.playerList.length == 0) {
                that.randomMusic(that.musicList);
                that.pauseMusic();
              }
              else if (index == that.playerList.length) {
                that.playThisMusicList(that.playerList[0], 0, true);
              } else {
                that.playThisMusicList(that.playerList[index], index, true);
              }
            }
            $('#musicArea .progress_bar').width(0);
          }, 200);



        })
      }, 16.7);

    },

    deleteAllPlayerLists() {
      for (var i = this.playerList.length; i >= 1; i--) {
        this.deleteThisPlayerMusic(i - 1);
      }
    },

    // 播放器播放暂停点击事件
    playerClick() {
      if ($('#musicArea .playerIcon').hasClass('glyphicon-play')) {
        if (this.playerList.length == 0) this.playMusic();
        else this.playMusic(this.playerListIndex);
      } else {
        if (this.playerList.length == 0) this.pauseMusic();
        else this.pauseMusic(this.playerListIndex);
      }
    },
    // 点击音乐滚动条事件
    toMusicPlay(e) {
      if (this.isMove) return;
      var w = $('#musicArea .progress').width();
      var x = e.layerX;
      var scale = x / w;
      if (x > 0) {
        this.audio.currentTime = scale * this.audioAllTime;
      } else {
        x = 0; scale = x / w;
        this.audio.currentTime = scale * this.audioAllTime;
      }
    },
    // 监听音乐滚动条事件
    onProgressMouseMove() {
      // 监听鼠标的按下事件
      $('#musicArea .progress').mousedown(() => {
        var $this = $('#musicArea .progress');
        this.is_Move = true;
        var normalLeft = $this.offset().left;
        var barWidth = $this.width();
        var eventLeft;
        // 监听鼠标的移动事件
        $(document).mousemove((event) => {
          // 获取点击的位置距离窗口的位置
          eventLeft = event.pageX;
          var offset = eventLeft - normalLeft;
          time = offset / barWidth * this.audioAllTime;
          if (offset >= 0 && offset <= barWidth) {
            $('.progress_bar').width(offset);
            $('.musicTime .nowTime').html(`${addZero(floor(time / 60))}:${addZero(floor(time % 60))}`);
          } else if (offset < 0) {
            $('.progress_bar').width(0);
            $('.musicTime .nowTime').html(`00:00`);
          } else {
            $('.progress_bar').width('100%');
            $('.musicTime .nowTime').html(`${addZero(floor(this.audioAllTime / 60))}:${addZero(floor(this.audioAllTime % 60))}`);
          }

        })

        // 监听鼠标的抬起事件
        $(document).mouseup(() => {
          $(document).off("mousemove");
          var scale = $('.progress_bar').width() / $('.progress').width();
          this.audio.currentTime = scale * this.audioAllTime;
          this.is_Move = false;
          $(document).off("mouseup");
        });
      })
    },
    // 点击声音滚动条事件
    toVoicePlay(e) {
      var allHeight = $('#musicArea .voiceProgress').height();
      var thisY = $('#musicArea .voiceProgress').offset().top
      var offsetY = e.clientY;
      var scale = parseFloat((thisY - offsetY  - 120) / allHeight).toFixed(1);
      if (scale >= 0.9) {
        $('.musicVoiceIcon').attr('class', 'musicVoiceIcon glyphicon glyphicon glyphicon-volume-up');
        this.audio.muted = false;
        this.volume = 1;
        this.audio.volume = 1;
        $('.musicVoiceIcon').attr('data-volume', 1);
        $('.voiceProgressC').height(`85%`);
      } else if (scale < 0.1) {
        $('.musicVoiceIcon').attr('class', 'musicVoiceIcon glyphicon glyphicon glyphicon-volume-off');
        this.audio.muted = true;
        $('.voiceProgressC').height(0);
      } else {
        $('.musicVoiceIcon').attr('class', 'musicVoiceIcon glyphicon glyphicon glyphicon-volume-down');
        this.audio.muted = false;
        this.volume = scale;
        this.audio.volume = scale;
        $('.musicVoiceIcon').attr('data-volume', scale);
        $('.voiceProgressC').height(`${85 * scale}%`);
      }
    },
    // 监听声音滚动条事件
    onVoiceProgressMove() {
      // 监听鼠标的按下事件
      $('.voiceProgress').mousedown(() => {
        var $this = $('.voiceProgress');
        var normalTop = $this.offset().top;
        var barHeight = $this.height();
        var eventTop;
        // 监听鼠标的移动事件
        $(document).mousemove((event) => {
          // 获取点击的位置距离窗口的位置
          eventTop = event.pageY;
          var offset = barHeight - (eventTop - normalTop);
          var volume = (parseInt(offset) / 100).toFixed(1);
          if (offset > 0.1 && offset <= barHeight) {
            $('.voiceProgressC').height(`${offset * 0.85}%`);
            $('.musicVoiceIcon').attr('class', 'musicVoiceIcon glyphicon glyphicon glyphicon-volume-down');
            this.audio.muted = false;
            this.audio.volume = volume;
            this.volume = volume;
            $('.musicVoiceIcon').attr('data-volume', volume);
          } else if (offset <= 0.1) {
            $('.voiceProgressC').height(0);
            $('.musicVoiceIcon').attr('class', 'musicVoiceIcon glyphicon glyphicon glyphicon-volume-off');
            this.audio.muted = true;
          } else {
            $('.voiceProgressC').height(`85%`);
            this.audio.muted = false;
            $('.musicVoiceIcon').attr('data-volume', 1);
            $('.musicVoiceIcon').attr('class', 'musicVoiceIcon glyphicon glyphicon glyphicon-volume-up');
            this.volume = 1;
            this.audio.volume = 1;
          }

        })

        // 监听鼠标的抬起事件
        $(document).mouseup(function () {
          $(document).off("mousemove");
          $(document).off("mouseup");
        });
      })
    },
    // 监听播放列表拖动事件
    onPlayerListMove() {
      setTimeout(() => {
        /*音乐列表拖动事件*/
        var musicAll = document.getElementById("musicAll");
        var moveTimer;
        musicAll.onmousedown = function (e) {
          clearInterval(moveTimer);
          e = e || window.event;
          var y_down = e.clientY;
          var top = this.offsetTop;
          document.onmousemove = function (e) {
            e = e || window.event;
            var y_move = e.clientY;
            var y_now = y_move - y_down;
            musicAll.style.top = top + y_now + "px";
          }

          document.onmouseup = function (e) {
            e = e || window.event;
            var y_move = e.clientY;
            var y_now = y_move - y_down;
            //缓冲运动至固定坐标
            moveTimer = setInterval(function () {
              var h = musicAll.offsetHeight;
              if (h < 500) { h = 500 }
              var speed1 = musicAll.offsetTop / 10; speed1 = Math.ceil(speed1);
              var speed2 = (musicAll.offsetTop + h - 500) / 10; speed2 = Math.floor(speed2);
              if (musicAll.offsetTop > 0) {
                musicAll.style.top = musicAll.offsetTop - speed1 + 'px';
              } else if (musicAll.offsetTop < -h + 500) {
                musicAll.style.top = musicAll.offsetTop - speed2 + 'px';
              } else {
                clearInterval(moveTimer)
              }

            }, 10);

            this.onmousemove = this.onmouseup = null;

          }

          return false;
        };
      }, 200);

    },
    // 监听播放列表整个拖动
    onAllPlayerListMove() {
      setTimeout(() => {
        /*音乐列表拖动事件*/
        var playerList = document.getElementById("playerList");
        var playerTitle = document.getElementById("movePlayer");
        playerTitle.onmousedown = function (e) {
          e = e || window.event;
          var x_down = e.clientX;
          var y_down = e.clientY;
          var left = playerList.offsetLeft;
          var top = playerList.offsetTop;
          document.onmousemove = function (e) {
            e = e || window.event;
            var x_move = e.clientX;
            var y_move = e.clientY;
            var x_now = x_move - x_down;
            var y_now = y_move - y_down;
            var l = left + x_now;
            var t = top + y_now;
            if (l < 0) {
              l = 0;
            }
            if (t < 70) {
              t = 70;
            }
            if (l > document.body.clientWidth - playerList.offsetWidth) {
              l = document.body.clientWidth - playerList.offsetWidth;
            }
            if (t > document.body.clientHeight - playerList.offsetHeight) {
              t = document.body.clientHeight - playerList.offsetHeight;
            }

            playerTitle.style.cursor = "move";
            playerList.style.left = l + 'px';
            playerList.style.top = t + 'px';
          }

          document.onmouseup = function () {
            playerTitle.style.cursor = "";
            this.onmousemove = this.onmouseup = null;

          }

          return false;
        };
      }, 200);
    },


    // 显示隐藏 音乐列表
    hidePlayerLists() {
      $('#musicAll').stop(true).slideUp(300, () => {
        $('#playerList').animate({ height: '0', opacity: 0 }, 300);
      });
      $('.playerTitle').stop(true).slideUp(300);
      $('.showPlayerList').attr('class', 'showPlayerList glyphicon glyphicon-eye-close');
      $('.showPlayerList').attr('title', '显示列表')
    },
    showPlayerLists() {
      $('#playerList').stop(true).animate({ height: '600', opacity: 1 }, 300, () => {
        $('#musicAll').slideDown(300);
        $('.playerTitle').slideDown(300);
      });
      $('.showPlayerList').attr('class', 'showPlayerList glyphicon glyphicon-eye-open');
      $('.showPlayerList').attr('title', '隐藏列表')
    },
    showPlayerList() {
      if (!$('.showPlayerList').hasClass('glyphicon-eye-close')) {
        this.hidePlayerLists();
      }
      else {
        this.showPlayerLists();
      }

    },
    // 改变播放器播放模式
    changePlayerType() {
      if (this.playerType == 3)
        this.playerType = 1;
      else this.playerType += 1;
    },


    // 隐藏 显示播放器
    playerHide() {
      $('#musicArea').slideUp(500, () => { $('.moveUp').slideDown(100) });
    },
    playerShow() {
      $('.moveUp').slideUp(100, () => { $('#musicArea').slideDown(500) });
    },
    // 声音控制面板 / 静音
    showVoice() {
      if ($('.musicVoiceArea').css('display') == 'none') {
        $('.musicVoiceArea').slideDown(300, () => { $('.voiceProgress').slideDown(200) });
      } else {
        // 静音
        if (!this.audio.muted) {
          $('.musicVoiceIcon').attr('class', 'musicVoiceIcon glyphicon glyphicon glyphicon-volume-off');
          this.audio.muted = true;
          $('.voiceProgressC').height(0);
        } else {
          if (this.volume == 1) {
            $('.musicVoiceIcon').attr('class', 'musicVoiceIcon glyphicon glyphicon glyphicon-volume-up');
          } else {
            $('.musicVoiceIcon').attr('class', 'musicVoiceIcon glyphicon glyphicon glyphicon-volume-down');
          }
          this.audio.muted = false;
          this.audio.volume = this.volume;
          $('.voiceProgressC').height(`${85 * this.volume}%`);
        }
      }
    },
    // 监听点击其他部分声音面板消失
    onVoicehide() {
      $(document).bind('click', function (e) {
        var targert = e.target;
        if ($(targert).closest('.musicVoice').length == 0) {
          $('.voiceProgress').slideUp(200, () => { $('.musicVoiceArea').slideUp(300) });
        }
      })
    },

    // 去主页
    toIndexClick() {
      window.location.href = `/`
    },
    // 去主页
    toMusicClick() {
      this.swiper(6);
      this.viewSelectId = '';
      this.viewType = 0;
      this.musicInfo = {};
      // 标题替换
      document.title = `好听的音乐还在这里 | Z-anime`;
    },
    toMusicInfo(_id) {
      this.musicInfo = this.musicList.filter(item => (item._id == _id))[0];
      this.viewSelectId = _id;
      this.viewType = 1;
      // 标题替换
      document.title = `${this.musicInfo.title} - ${this.musicInfo.singer} | Z-anime`;

      // 获取歌词
      var lyric = new Lyric(this.musicInfo.LyricsUrl);
      var $lryicContainer = $("#muiscInfo .Lyrics");
      // 清空上一首音乐歌词
      $lryicContainer.html("");
      lyric.loadLyric(function () {
        // 创建歌词列表
        $.each(lyric.lyrics, function (index, ele) {
          var $item = $("<p>" + ele + "</p>");
          $lryicContainer.append($item);
        });
      });

      setTimeout(()=>{
        if($('#musicArea .playerIcon').hasClass('glyphicon-play')){
          this.musicPlayer = this.musicInfo;
          this.initLyric();
        }
      },60);

      // 其他音乐随机
      this.musicOthersRandom();
      scrollTo(0, 0);
    },

    // 其他音乐随机
    musicOthersRandom() {
      var thisIndex = 0;
      this.musicList.map((item, index) => {
        if (item._id == this.musicInfo._id) {
          thisIndex = index;
        }
      });
      var numArr = this.noRepeatNum(this.musicList.length, 6);
      this.musicOthers = this.musicList.filter((item, index) => {
        if (index != thisIndex) {
          return numArr.indexOf(index + 1) != -1;
        }
      });
    },

  },

  created() {
    this.readFile();
    $('#titleUrl').html(`{{musicInfo.title}} - {{musicInfo.singer}}`);
    // 主页
    // 每日推荐
    $('.imgArr').html(`<div v-for="(item,index) in musicList" :class="index==0?'swiper-slide swiper-slide-active':'swiper-slide '" >
      <img :src="item.imgSrc" @click="toMusicInfo(item._id)">
      <div class="layer-mask"></div>
     <div/>`)

    // 音乐库
    var temList = `<div class="musicItem" v-for="item in #list#">
     <div class="imgCotainer" @click="toMusicInfo(item._id)">
       <img :src="item.imgSrc" alt="">
     </div>
     <div class="content">
       <div class="musicTitle" @click="toMusicInfo(item._id)">{{item.title}} - {{item.singer}}</div>
       <div class="musicAlbum">
       歌名：{{item.title}} &nbsp;/&nbsp; 歌手：{{item.singer}} &nbsp;/&nbsp; 专辑：{{item.album}}
       </div>
       <div class="musicTime2">
       时长：{{item.time}}
       </div>
       <div class="buttonGroups">
         <span title="添加至列表" class="glyphicon glyphicon-plus addIcon" @click="addThisMusic(item)"></span>
         <span title="播放此音乐" class="glyphicon glyphicon-play playerIcon" @click="playThisMusic(item)"></span>
       </div>
     </div>
   </div>`
    // 热听榜
    var temTop = `<div class="musicItem" v-for="(item,index) in #listTop#">
   <div class="imgCotainer" @click="toMusicInfo(item._id)">
     <img :src="item.imgSrc" alt="">
     <div class="topNum">{{index + 1}}</div>
   </div>
   <div class="content">
     <div class="musicTitle" @click="toMusicInfo(item._id)">{{item.title}} - {{item.singer}}</div>
     <div class="musicAlbum">{{item.album}}</div>
     <div class="buttonGroups">
       <span title="添加至列表" class="glyphicon glyphicon-plus addIcon" @click="addThisMusic(item)"></span>
       <span title="播放此音乐" class="glyphicon glyphicon-play playerIcon" @click="playThisMusic(item)"></span>
     </div>
     <div class="zValue">{{item.zValue}}</div>
   </div>
    </div>`
    this.musicArea.map((item, index) => {
      $(`#${item.eName} .left .musicList_title`).html(`${item.name}系列（共有 {{${item.eName}Music.length}} 首歌）`);
      $(`#${item.eName} .left .musicUl`).html(temList.replace('#list#', `${item.eName}Music`));
      $(`#${item.eName} .right .musicUl`).html(temTop.replace('#listTop#', `${item.eName}MusicTop`));
    });
    // 单页详细音乐
    // 歌名 热度
    $('#muiscInfo .content .title').html(`{{musicInfo.title}}<span>{{musicInfo.zValue}}</span>`)
    // 歌手 专辑
    $('#muiscInfo .content .singer span').html(`{{musicInfo.singer}}`)
    $('#muiscInfo .content .album span').html(`{{musicInfo.album}}`)
    // 其他音乐
    $('#muiscInfo .right .othersLists').html(`<div class="list" v-for="item in musicOthers" @click="toMusicInfo(item._id)">
    <div class="imgC">
        <img :src="item.imgSrc" alt="">
    </div>
    <div class="content">
      <div class="titleName">{{item.title}}</div>
      <div class="singerName">by {{item.singer}}</div>
    </div>
  </div>`)

    //播放器
    // 歌名-歌手
    $('#musicArea .musicTitle').html(`{{musicPlayer.title}} - {{musicPlayer.singer}}`);
    // 专辑
    $('#musicArea .album').html(`{{musicPlayer.album}}`);
    // 极简歌词
    $('.moveUp span').html(`{{songLyrcl}} ({{musicPlayer.title}} - {{musicPlayer.singer}})`);

    // 播放列表
    $('#playerTitle').prepend(`共有 {{playerList.length}} 首`)
    $('.playerLists ul').html(`<div class="playerList" v-for="(item,index) in playerList">
   <div class="musicImg">
     <img :src="item.imgSrc" alt="">
     <div class="backBg">
        <span title="播放" class="glyphicon glyphicon-play playIcon" @click="playThisMusicList(item,index)"></span>
     </div>
   </div>
   <div class="content">
      <div class="title" >{{item.title}} - {{item.singer}}</div>
      <div class="album" >{{item.album}}</div>
      <div class="bottom">
        <div class="others">
            <span title="信息" class="glyphicon glyphicon-th-large info" @click="toMusicInfo(item._id)"></span>
            <span title="重播" class="glyphicon glyphicon-repeat refresh" @click="replayThisMusic(item,index)"></span>
            <a :href="item.musicUrl" :download="item.title + ' - ' +item.singer + '.mp3'" title="下载"><span class="glyphicon glyphicon-download-alt download"  ></span></a>
            <span title="删除" class="glyphicon glyphicon-trash delete" @click="deleteThisPlayerMusic(index)"></span>
          </div>
        <div class="time">时长：{{item.time}}</div>
      </div>
   </div>
 </div>`)
  },

  mounted() {
    this.audio = $("audio")[0];
  },

  updated() {
    localStorage.setItem('volume',this.volume)
  },

}).$mount('#musicAreaCotanier');

